
<template>
  <!-- 列表 -->
  <div
    v-srcollloadmore="srcollloadmore"
    class="list_list"
    ref="scollElement"
    :style="
      height ? ' height: calc(100% - 128px);' : ' height: calc(100% - 90px);'
    "
  >
    <transition-group name="list-complete">
      <div class="list" v-for="(v, i) in rightpicList" :key="i">
        <div class="list_div">
          <img
            class="list_img"
            :src="v.logoImage"
            @click="listimgclick(v.logoImage, v.logoName)"
          />
          <!-- 删除 -->
          <img
            v-if="height"
            class="list_shanchu"
            @click.stop="listshanchuClick(v.logoId)"
            :src="img.shanchu"
            alt=""
          />
        </div>
        <p class="list_p">{{ v.logoName }}</p>
      </div>
    </transition-group>
    <div v-if="iflistcon" class="list_null">
      <p>没有匹配内容</p>
    </div>
  </div>
</template>
  
  <script>
import mixin from "@/utils/mixin";
export default {
  watch: {
    rightpicList(newVal) {
      this.rightpicList = newVal;
      if (this.rightpicList.length === 0) this.iflistcon = true;
      else this.iflistcon = false;
    },

    cuslogolistdel(newVal) {
      let index = this.rightpicList.findIndex((v) => v.logoId === newVal);
      this.rightpicList.splice(index, 1);
    },
    picscrollTop(newVal) {
      if (newVal == 0) this.$refs.scollElement.scrollTop = 0;
    },
  },
  mixins: [mixin],
  props: ["rightpicList", "cuslogolistdel", "picscrollTop"],
  data() {
    return {
      iflistcon: false,
      height: null,
    };
  },
  methods: {
    srcollloadmore() {
      this.$datatools.throttle(this.$emit("picListPage"), 2000);
    },
    //内容——左——列2——列表——收藏——点击选中
    listcollectClick(type, i) {
      if (type == 2) this.ClassifyTemplateList[i].collect = true;
      else this.ClassifyTemplateList[i].collect = false;
    },
    listimgclick(value, name) {
      let obj = {
        src: value,
        name,
      };
      this.$emit("childvalue", obj);
    },
    //删除模板
    listshanchuClick(id) {
      this.$emit("materialDel", id);
      this.$store.commit("templateStage/clearRules")
    },
    scrollChange() {
      this.$emit("scroll", this.$refs.scollElement.scrollTop);
    },
  },
  created() {
    if (window.localStorage.getItem("eplatformpowertype") == 0)
      this.height = false;
    else this.height = true;
  },
  mounted() {
    // 获取指定元素
    this.$refs.scollElement.addEventListener("scroll", this.scrollChange, true);
  },
  beforeDestroy() {
    // 获取指定元素
    this.$refs.scollElement.removeEventListener(
      "scroll",
      this.scrollChange,
      true
    );
  },
};
</script>
  
  <style lang="less" scoped>
@import "../../assets/styles/frame.less";
.list_list {
  overflow-y: auto;
  position: absolute;
  width: 228px;
  margin-top: 20px;
  color: @color2;
  height: calc(100% - 90px);
  .divDFJS();
  &::-webkit-scrollbar {
    width: 0px !important;
  }
  .list_null {
    width: 100%;
    height: 40px;
    .cen();
    font-size: 16px;
  }
  .list {
    float: left;
    position: relative;
    .divDWJ();
    width: 228px;
    margin-bottom: 20px;
    transition: all 1s;
    .list_div {
      width: 100%;
      overflow: hidden;
      border-radius: @radius1;
      position: relative;
      .list_shanchu {
        position: absolute;
        // right: 0;
        top: 50%;
        right: 0;
      }
      .list_img {
        width: 100%;
        height: auto;
        display: block;
      }
      .list_xin {
        cursor: pointer;
        position: absolute;
        width: 18px;
        height: 18px;
        top: 40px;
        right: 18px;
      }
    }
    .list_p {
      width: 100%;
      margin-top: 6px;
      overflow: hidden;
      .cen();
    }
  }
}
</style>